<template>
  <div class="comment">
    <div class="submitbox">
      <h3>提交评论</h3>
      <div>
        <!-- mt-field组件中的rows属性只在type='textarea'的时候生效 -->
        <mt-field placeholder='请输入评论内容' type='textarea' rows='5' v-model='commentContent'></mt-field>
        <mt-button size='small' @click='handlePost'>发表</mt-button>
      </div>
    </div>
    <div class="commentbox">
      <h3 class="line">评论详情</h3>
      <ul>
        <li v-for='(item,index) in commentList' :key='index'>
          <h4 class="comment-content">{{item.content}}</h4>
          <p><span class="comment-user">{{item.user_name}}</span><span class="comment-time">{{item.add_time | fmtTime}}</span></p>
        </li>
      </ul>
    </div>
    <div class="button-group">
      <!-- 1.5 给加载更多按钮绑定事件-->
      <mt-button size='large' type='primary' @click='loadMore' v-if='hasMore'>加载更多</mt-button>
      <mt-button size='large' v-else>没有更多了</mt-button>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
// 1.11 引入qs工具，它可以用来转换post请求数据的格式
import qs from 'qs'
import {getCommentList, postComment} from '@/api'
export default {
  data () {
    return {
      commentList: [], // 保存评论列表数据
      pageIndex: 1, // 设置显示评论列表的页码
      hasMore: true, // 1.4 判断是否有更多评论
      commentContent: '' // 保存输入内容
    }
  },
  // 1.1 在评论组件中挖坑，保存父组件传递过来的id
  props: ['id'],
  created () {
    // 1.3 调用1.2定义的方法
    this.initCommentList()
  },
  methods: {
    // 1.2 定义获取评论列表数据方法
    initCommentList () {
      getCommentList(this.id, this.pageIndex)
        .then(res => {
          console.log(res)
          // 1.7 拼接数据，原来的老数据 + 新的数据
          let oldCommentList = this.commentList
          this.commentList = [...oldCommentList, ...res.message]
          // 1.8 还要判断是否有更多，没有的话就将hasMore设为false。正常情况下后台应该返回一个数据总条数给前台，前台判断总共多少页，一次来判断有没有更多。但此时我们的后台没有返回，所以我们只能偷懒（不科学）
          if (res.message.length < 10) {
            // 长度等于10时有bug
            this.hasMore = false
          }
        })
    },
    loadMore () {
      // 1.6 将页码数加1，获取下一页数据，但是要注意，将以前老的数据和现在新获取的数据进行拼接，不能替换掉了
      this.pageIndex += 1
      this.initCommentList()
    },
    // 提交发表
    handlePost () {
      // 1.9 发表评论之前先判断输入内容是否为空，为空就弹出一个提示信息
      if (!this.commentContent.trim()) {
        // 为空时弹窗
        Toast({
          message: '请输入内容后再提交！',
          position: 'middle',
          duration: 3000
        })
      } else {
        // 1.10 发请求提交内容，发请求之前，需要将第二个参数处理一下，不能以对象形式发送
        let obj = {content: this.commentContent}
        // 1.12 将obj对象转换成这种格式content=xxx 借助于qs.stringify()
        postComment(this.id, qs.stringify(obj))
          .then(res => {
            // console.log(res)
            // 1.13 刷新列表前清空数据，不然会叠加数据 刷新列表、清空输入框、弹出成功信息
            this.commentList = []
            this.initCommentList()
            this.commentContent = ''
            Toast({
              message: '操作成功',
              iconClass: 'iconfont icon-gouwuche'
            })
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.inputbox {
  border: 1px solid #999;
}
.comment h3 {
  font-weight: bold;
  margin: 10px 0;
  font-size: 14px;
}
.line {
  border-top: 1px solid #999;
  padding-top: 10px;
}
.commentbox{
  li:not(:last-child) {
    border-bottom: 1px solid #999;
    margin: 5px 0;
  }
  p {
    font-size: 14px;
  }
  .comment-content {
    color: #999;
    font-size: 14px;
  }
}
.comment-user, .comment-time {
  font-size: 12px;
  color: #26a2ff;
}
</style>
